<template>
    <div class="md-layout">
        <div class="md-layout-item">
          <div class="in-offPd">
            <div class="in-officeContent" >
              <template  v-for="task in blue">
                <div style="width: 100%;float: left" >
                  <div style="width: 100%;float: left">
                    <div style="float: left">
                      <md-button class="md-raised" @click="">{{task.appName}}</md-button>
                      <p>10:24</p>
                      <p>2018-12-05</p>
                    </div>
                    <div style="float: left">
                      <div>
                        <div >{{task.title}}</div>
                        <p class=""><span>承办人：{{task.userName}}</span> <span style="margin-left: 30px">状态：处理中</span><md-button class="md-raised" @click="getGreen(task)">展开</md-button></p>
                      </div>
                    </div>
                  </div>
                  <template v-for="data in task.children" v-if="task.children.length > 0">
                    <div  style="margin-left: 130px;float: left">
                      <div style="float: left">
                        <md-button class="md-raised" >{{data.appName}}</md-button>
                        <p>10:24</p>
                        <p>2018-12-05</p>
                      </div>
                      <div style="float: left">
                        <div>
                          <div >{{data.title}}</div>
                          <p class=""><span>承办人：{{data.userName}}</span> <span style="margin-left: 30px">状态：处理中</span></p>
                        </div>
                      </div>
                    </div>

                  </template>
                </div>
              </template>

            </div>
          </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                blue:[
                {
                  "recordId":"97dfa09870b14964beb97b44d4462869",
                  "data":"2018-12-20T05:00:00.000+0000",
                  "appName":"公文办理",
                  "appId":"ec2b3bab88d9426eaaa1ebb18902987a",
                  "appUrl":null,
                  "id":"8a81857667c987890167c987fc240000",
                  "title":"广西壮族自治区人民政府办公厅关于研究城乡居民大病保险有关工作会议的通知",
                  "userName":"覃肇锋",
                  "type":1,
                  "userId":"1335",
                  "taskId":"ff80808167a15a860167abcbc6d3000b",
                  "key":"418ee55a90f2448381f290552b9185ba",
                  "children":[]
                },
                {
                  "recordId":"97dfa09870b14964beb97b44d4462869",
                  "data":"2018-12-20T05:00:00.000+0000",
                  "appName":"文稿审核系统",
                  "appId":"ec2b3bab88d9426eaaa1ebb18902987a",
                  "appUrl":"http://20.0.101.130:89/sanban/taskdetail.aspx",
                  "id":"8a81857667c98b770167c98bf91a0000",
                  "title":"材料上报",
                  "userName":"覃肇锋",
                  "type":2,
                  "userId":"1335",
                  "taskId":"ff80808167a15a860167abcbc6d3000b",
                  "key":"418ee55a90f2448381f290552b9185ba",
                  "children":[]
                },
                {
                  "recordId":"8a81857667cc27810167cc2864180000",
                  "data":"2018-12-20T05:00:00.000+0000",
                  "appName":"文稿审核系统",
                  "appId":"ec2b3bab88d9426eaaa1ebb18902987a",
                  "appUrl":"http://20.0.101.130:89/sanban/taskdetail.aspx",
                  "id":"8a81857667cc51390167cc51e5050000",
                  "title":"征求意见类通知标题1214app",
                  "userName":"蔡振军",
                  "type":2,
                  "userId":"2",
                  "taskId":"ff80808167a15a860167abcbc6d3000b",
                  "key":"418ee55a90f2448381f290552b9185ba",
                  "children":[]
                }
              ],
                green:[
                {
                  "recordId":"8a81857667c49d140167c4a408100000",
                  "data":"2018-12-19T05:00:00.000+0000",
                  "appName":"通知系统",
                  "appId":"ec2b3bab88d9426eaaa1ebb18902987a",
                  "appUrl":null,
                  "id":"8a81857667c6a8250167c6aa72920000",
                  "title":"专项测试",
                  "userName":"覃肇锋",
                  "type":0,
                  "userId":"1335",
                  "taskId":"97dfa09870b14964beb97b44d4462869",
                  "key":"418ee55a90f2448381f290552b9185ba"
                },
                {
                  "recordId":"08dad027ab404647b46f978a3518596c",
                  "data":"2018-12-20T05:00:00.000+0000",
                  "appName":"通知系统",
                  "appId":"ec2b3bab88d9426eaaa1ebb18902987a",
                  "appUrl":"error",
                  "id":"8a81857667c976e90167c978132f0000",
                  "title":"征求意见类通知标题",
                  "userName":"覃肇锋",
                  "type":0,
                  "userId":"1335",
                  "taskId":"97dfa09870b14964beb97b44d4462869",
                  "key":"418ee55a90f2448381f290552b9185ba"
                }
              ],
            }
        },
        created () {

        },
        methods: {
          getGreen(data){
            console.log(data);
            if(data.type == 2){
              this.getTaskData(data);
            }
          },
          getTaskData(data){
            this.tkID = data.id;
            console.log('ww',this.tkID);
            this.Token = localStorage.getItem('token');
            for(var item in this.blue){
              if(this.blue[item].id == data.id){
                this.blue[item].children = this.green;
              }
            }
            console.log(this.blue)
            // this.$http({
            //   method:'GET',
            //   url:ht.Address + "personal/task/findRelationByTaskId?taskid="+ this.tkID
            //   ,headers:{
            //     "Authorization":this.Token
            //   },
            // })
            //   .then( (response)=> {
            //     console.log(response.data.data);
            //     for(var item in blue){
            //       if(item.id == data.id){
            //         item.children = this.green;
            //       }
            //     }
            //   }).catch( (error)=> {
            //   console.log(error)
            // })
          }
        }
    }
</script>

<style lang="scss" scoped>
    .md-content .md-table-content {
        max-height: 800px !important;
    }
</style>
